import { Link } from 'expo-router'
import { useThemeColor } from '@/hooks/useThemeColor'
import { type ComponentProps } from 'react'

type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: string } & { text?: string }

/** 文本路由跳转链接 */
export function RouterTextLink({ href, text, style }: Props) {
  const color = useThemeColor({}, 'link')
  return (
    <Link
      href={href}
      style={[{ color }, style]}
    >
      {text}
    </Link>
  )
}

/** 支持 children 的路由跳转链接 */
export function RouterLink({ href, style, children }: Props & { children: React.ReactNode }) {
  const color = useThemeColor({}, 'link')
  return (
    <Link
      href={href}
      style={[{ color }, style]}
    >
      {children}
    </Link>
  )
}
